<template>
  <div class="college-search">
    <div class="back">
      <img :src="home" @click="handleBackPressed" class="back-arrow" alt="" />
    </div>
    <div class="header">
      <img :src="logo" class="logo" alt="" />
      <div class="title" v-if="showTest">-</div>
    </div>
    <div class="search">
      <MajorSearchBox :showHistory="true" :showExtraBtn="true" />
    </div>

    <div class="main">
      <HotMajorList :majorList="majorList" />
      <FavoriteMajor :majorList="favoriteMajorList" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineAsyncComponent, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { getHotMajor, campusCollectTags } from '@/api/majorSearch';
import { onBackPressed } from '@/utils/androidFn.js';
import home from '@/assets/images/home.png';
import logo from '@/assets/images/logo.png';

const MajorSearchBox = defineAsyncComponent(() =>
  import('@/components/MajorSearchBox.vue')
);
const FavoriteMajor = defineAsyncComponent(() =>
  import('./components/FavoriteMajor.vue')
);
const HotMajorList = defineAsyncComponent(() =>
  import('./components/HotMajorList.vue')
);

defineOptions({
  name: 'MajorSearch',
});

const router = useRouter();

const majorList = ref([]);
const getHotMajorFn = async () => {
  const params = {
    ecCode: 'padHotTagScroll',
  };
  const res = await getHotMajor(params);
  if (res.code === 200) {
    majorList.value = res.data;
  }
};

// 收藏专业列表
const favoriteMajorList = ref([]);
const campusCollectTagsFn = async () => {
  const params = {
    pageNo: 1,
    pageSize: 10,
  };
  const res = await campusCollectTags(params);
  if (res.code === 200) {
    favoriteMajorList.value = res.data;
  }
};

const handleBackPressed = () => {
  onBackPressed(router);
};

const showTest = ref(false);
// 如果域名包含test，则显示测试文字
if (
  window.location.href.indexOf('test') !== -1 ||
  window.location.href.indexOf('localhost') !== -1
) {
  showTest.value = true;
}

onMounted(() => {
  getHotMajorFn();
  campusCollectTagsFn();
});
onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.college-search {
  // width: 100%;
  // height: 100vh;
  background-image: url('@/assets/images/BackgroundHome.png');
  background-size: cover;
  padding: 0 60px 52px 60px;
  box-sizing: border-box;
  font-size: 20px;
  .icon {
    width: 24px;
    height: 24px;
  }
  .back {
    padding: 30px 0px;
    .back-arrow {
      width: 48px;
      height: 48px;
    }
  }
  .header {
    padding: 4px 0;
    margin-bottom: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo {
      width: 145px;
      height: 56px;
    }
  }
  .search {
    // display: flex;
    // gap: 16px;
    // align-items: center;
    // justify-content: center;
  }

  .main {
    display: flex;
    gap: 40px;
    margin-top: 30px;
    justify-content: center;
  }
}
</style>
